// USER VARIABLES SECTION

$accent: orange; // Accent Color
$fontsize: 16px; // Body Font Size
$textcolor: #333; // Text Color
$system: -apple-system, BlinkMacSystemFont, Arial, sans-serif; // System Font Family
$roboto: Roboto, sans-serif; // Roboto Font Family

// Bootstrap compatible gutter variable => $gutter
$grid-gutter-width: 20px;
$gutter: $grid-gutter-width;

// IMPORT SECTION

@import 'node_modules/bootstrap/scss/bootstrap-reboot.scss'; // Bootstrap Reboot collection
@import 'node_modules/bootstrap/scss/mixins/_breakpoints.scss'; // Bootstrap Breakpoints mixin
// @import 'node_modules/bootstrap/scss/bootstrap-grid.scss'; // Optional Bootstrap Grid
// @import 'node_modules/bootstrap/scss/utilities/_sizing.scss'; // Optional Bootstrap Utilites

// FONTS LOAD SECTION

@mixin font($fname, $fstyle, $fweight, $furl) {
	@font-face {
		font-family: $fname;
		font-style: $fstyle;
		font-weight: $fweight;
		// font-display: swap; // Uncomment to initially display system fonts
		src: local($fname), url($furl) format('woff2');
	}
}

@include font('Roboto', normal, 400, '../fonts/roboto-regular-webfont.woff2');
@include font('Roboto', italic, 400, '../fonts/roboto-italic-webfont.woff2');
@include font('Roboto', normal, 700, '../fonts/roboto-bold-webfont.woff2');
@include font('Roboto', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2');

// GENERAL DOCUMENT STYLES

::placeholder {
	color: #666;
}

::selection {
	background-color: $accent;
	color: #fff;
}

input, textarea {
	outline: none;
	&:focus:required:invalid { border-color: red }
	&:required:valid { border-color: green }
}

body {
	font-family: $roboto;
	font-size: $fontsize;
	min-width: 320px;
	position: relative;
	line-height: 1.65;
	overflow-x: hidden;
	color: $textcolor;
}
